<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>使用Selector的示例</title>
	<style>
		td {
			border: solid 1px;
			font-size: 300%;
		}

		td:hover {
			background-color: cyan;
		}

		#hoverResult {
			color: #00f;
			font-size: 200%;
		}
	</style>
</head>
<body>
<section>

	<table>
		<tr>
			<td>a1</td>
			<td>a2</td>
			<td>a3</td>
		</tr>
		<tr>
			<td>b1</td>
			<td>b2</td>
			<td>b3</td>
		</tr>
		<tr>
			<td>c1</td>
			<td>c2</td>
			<td>c3</td>
		</tr>
	</table>

	<div>Focus the button, hover over the table cells, and hit Enter to identify them using querySelector('td:hover').</div>
	<p>在JavaScript中定义响应button事件的方法，HTML5代码中不需要理会这些，设计与样式分离。</p>
	<p>这一小节讲了JavaScript中两个选择器函数，它们与以前document中根据id或name等属性查找元素的方式不同的是使用CSS的选择规则，而且效率更高，速度更快：querySelector()选择的是满足选择符条件的第一个元素；querySelectorAll（）选择的是满足选择符条件的所有元素。注意：伪类也可以作为选择符使用：</p>
		<code>var hovered = document.querySelector('td:hover');	</code>
	<p>注意：hover是CSS的伪类选择符，querySelector函数对选择符的使用规则与CSS是一样的。</p>
	<button type="button" id="findHover" autofocus>Find 'td:hover' target</button>
	<div id="hoverResult"></div>
</section>
<script>
	//在这儿定义响应button事件的方法，HTML5代码中不需要理会这些，设计与样式分离
	document.getElementById("findHover").onclick = function () {
		//找出页面中的单元格
		var hovered = document.querySelector('td:hover');	//querySelector查找指定属性的第一个元素，伪类也可以用。
		if(hovered) {
//			document.getElementById('hoverResult').innerHTML = hovered.innerHTML;
			document.querySelector('#hoverResult').innerHTML = hovered.innerHTML;		//照此理论，这行与上面一行的效果一样，但是更快
		}
	}
</script>

</body>
</html>